<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    #box {
        display: flex;
    }

    .img {
        width: 240px;
        height: 330px;
        position: relative;
        background-image: url(https://gd-hbimg.huaban.com/37f50feb12e1c0f9b5587f91ef68a5f954974df121fd6c-kCtPlD_fw240webp);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    .mask {
        width: 120px;
        height: 120px;
        background-image: url(https://gd-hbimg.huaban.com/37f50feb12e1c0f9b5587f91ef68a5f954974df121fd6c-kCtPlD_fw240webp);
        background-size: 480px auto;
        background-repeat: no-repeat;
        background-position: 0 0;
        position: absolute;
        left: 0;
        top: 0;
        border-radius: 50%;
    }

    .show {
        display: block;
    }

    img {
        width: 100%;
        height: 100%;
    }
</style>

<body>
    <div id="box">
        <div class="img">
            <div class="mask"></div>
        </div>

    </div>


    <script>
        const img = document.getElementsByClassName('img')[0]
        const mask = document.getElementsByClassName('mask')[0]


        // 效果1
        // img.onmousemove = (e) => {
        //     let x = e.clientX - img.clientLeft
        //     let y = e.clientY - img.clientTop


        //     if (x < mask.clientWidth / 2) {
        //         x = mask.clientWidth / 2
        //         mask.style.backgroundPositionX = (e.clientX - img.clientLeft) * -2 + 'px'
        //     } else if (x > img.clientWidth - mask.clientWidth / 2) {
        //         x = img.clientWidth - mask.clientWidth / 2
        //         mask.style.backgroundPositionX = x * -2 + 'px'
        //     } else {
        //         mask.style.backgroundPositionX = (e.clientX - img.clientLeft) * -2 + 'px'
        //     }

        //     if (y < mask.clientHeight / 2) {
        //         y = mask.clientHeight / 2
        //         mask.style.backgroundPositionY = (e.clientY - img.clientTop) * -2 + 'px'
        //     } else if (y > img.clientHeight - mask.clientHeight / 2) {
        //         y = img.clientHeight - mask.clientHeight / 2
        //         mask.style.backgroundPositionY = y * -2 + 'px'
        //     } else {
        //         mask.style.backgroundPositionY = (e.clientY - img.clientTop) * -2 + 'px'
        //     }

        //     mask.style.left = x - mask.clientWidth / 2 + 'px'
        //     mask.style.top = y - mask.clientHeight / 2 + 'px'

        // }

        // 效果2
        img.onmousemove = (e) => {
            let x = e.clientX - img.clientLeft
            let y = e.clientY - img.clientTop


            if (x < mask.clientWidth / 2) {
                x = mask.clientWidth / 2
            } else if (x > img.clientWidth - mask.clientWidth / 2) {
                x = img.clientWidth - mask.clientWidth / 2
            }

            if (y < mask.clientHeight / 2) {
                y = mask.clientHeight / 2
            } else if (y > img.clientHeight - mask.clientHeight / 2) {
                y = img.clientHeight - mask.clientHeight / 2
            }

            mask.style.left = x - mask.clientWidth / 2 + 'px'
            mask.style.top = y - mask.clientHeight / 2 + 'px'

            mask.style.backgroundPositionX = x * -2 + mask.clientWidth / 2 + 'px'
            mask.style.backgroundPositionY = y * -2 + mask.clientHeight / 2 + 'px'

        }


    </script>
</body>

</html>